<template>
  <div class="home-wrapper">
    <Layout>
      <Sider min-hidden :width="collapsed ? 62 : 208">
        <side-menu
          @goLink="homeGoLink"
          :collapsed="collapsed"
          :menu-list="route"
        ></side-menu>
      </Sider>
      <Drawer min-show placement="left" :closable="false" :value="mCollapsed" @on-close="mCollapsed = false">
        <side-menu
          @goLink="homeGoLink"
          :menu-list="route"
        ></side-menu>
      </Drawer>
      <Content>
        <header-bar min-hidden @collapsed="(res) => (collapsed = res)" :collapsed="collapsed" :historyPage="historyPage" :theme="theme"></header-bar>
        <header-bar min-show @collapsed="(res) => (mCollapsed = res)" :collapsed="mCollapsed" :historyPage="historyPage" :theme="theme"></header-bar>
        <tags :pageList="page_list"></tags>
        <div ref="scroll" class="home-view">
          <!-- <keep-alive :include="cachePage"> -->
            <router-view />
          <!-- </keep-alive> -->
        </div>
      </Content>
    </Layout>
    <!-- <BackTop cont="scroll" top="100"></BackTop> -->
  </div>
</template>

<script>
import HeaderBar from "@/components/header-bar";
import Tags from "@/components/tags";
import SideMenu from "@/components/side-menu";
import BackTop from "@/components/back-top";
import { setCookie } from "@/utils/common";
// import { addRouters, updateRouters, removeRouters } from "@/api/menu";
export default {
  name: "index",
  components: {
    HeaderBar,
    Tags,
    SideMenu,
    BackTop,
  },
  data() {
    return {
      collapsed: false,
      mCollapsed: false,
      historyPage: [],
      cachePage: ['menus']
    };
  },
  created() {
    this.filterRoute(this.$route);
    this.$store.dispatch('other/addPageList', this.$route);
    // addRouters()
    // updateRouters()
    // var a=[]
    // var a=["e6dacde4f13a435dbf07e642329aecb8","92156af3bb914928997651393a031b64","6c954750a4cd425090f93da19f52f506","732d87e7c5444123b561b947b5a468e1"]
    // a.length&&a.map(item=>{
    //   removeRouters(item)
    // })
  },
  watch: {
    $route(to, from) {
      this.mCollapsed = false;
      this.filterRoute(to);
      this.$store.dispatch('other/addPageList', to);
    }
  },
  computed: {
    route() {
      return this.$store.state.router.addRoutes;
    },
    page_list() {
      return this.$store.state.other.page_list;
    },
    theme() {
      return this.$store.state.other.theme;
    }
  },
  mounted() {},
  methods: {
    homeGoLink(res) {
      if (res) this.$router.push(res);
      else {
        setCookie("token", "");
        this.$router.push('/login');
      }
    },
    filterRoute(route) {
      this.historyPage = route.path == '/home' ? [] : route.matched.reduce((arr, item, index) => {
        index > 0 && item.meta.title && arr.push(item.meta.title);
        return arr;
      }, []);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ivu-layout-sider {
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
  z-index: 100;
}

/deep/.ivu-drawer-no-header .ivu-drawer-body {
  padding: 0;
  background-color: #353b48;
}

.ivu-layout-content {
  box-sizing: border-box;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  .home-view {
    height: calc(100vh - 96px);
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    border-top: 1px solid #e8eaec;
    .ivu-card,
    /deep/.ivu-card-body {
      height: 100%;
      display: flex;
      flex-direction: column;
      .ivu-row {
        position: relative;
      }
      .edit-model-form .ivu-form-item {
        margin-bottom: 10px;
      }
      .content {
        flex-grow: 1;
        overflow: hidden;
        .ivu-table-wrapper {
          height: ~"calc(100% - 50px)";
          overflow-x: auto;
        }
        .ivu-table-wrapper,
        .ivu-table {
          display: flex;
          flex-direction: column;
          &::before {
            display: none;
          }
          > .ivu-table-header {
            min-height: 39px;
          }
          .ivu-table-body {
            margin-left: -10px;
            .ivu-table-row td {
              padding-left: 10px;
            }
          }
          > .ivu-table-body, >.ivu-table-tip {
            flex-grow: 1;
            overflow-y: auto;
            overflow-x: visible;
          }
          >.ivu-table-tip > * {
            height:100%
          }
        }
        .ivu-page {
          padding-top: 10px;
          text-align: center;
        }
      }
    }
  }
}
</style>